<%@ page contentType="text/html; charset=utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
    <title>天猫注册</title>
    <link rel="icon" href="https://g.alicdn.com/mui/global/1.2.35/file/favicon.ico"/>
<%--    jquery   css--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/reg.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/protocol.css">
    <script src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/frame/jquery.cookie.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/frame/totoro-utils.js"></script>
<%--    滑块js css--%>
    <link rel="stylesheet" href="static/css/user/sliding.css">
    <script src="static/js/self/user/sliding.js"></script>
<%--    element  vue--%>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script>
</head>
<body>
<%--注册界面共同的头部(样式不同)--%>
<div class="primary-box page">
    <div class="steps">
        <ol>
            <li class="active">
                <i>1</i>
                <span>设置用户名</span>
            </li>
            <li>
                <i>2</i>
                <span>填写账号信息</span>
            </li>
            <li>
                <i class="icon-font">&#10004</i>
                <span>注册成功</span>
            </li>
        </ol>
    </div>
    <%--------------------------%>
    <%-- 身体 --%>
    <div class="content">
        <div class="phone-dialog">
        <form id="phoneNext" method="get">
            <div class="form-list form-main-list">
                <div class="form-group">
                    <div class="form-item">
                        <span class="form-value">手机号码</span>
                        <div id="app">
                        <template>
                            <el-select v-model="label" placeholder="请选择" @change="getVal()">
                                <el-option
                                        v-for="item in cities"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    <span style="float: left; font-size: 14px; font-weight: 700">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 14px; font-weight: 700">{{ item.value }}</span>
                                </el-option>
                            </el-select>
                        </template>
                            <input type="text" placeholder="请输入你的手机号码" class="form-phone">
                            <span id="reg-error" style="display: none"><i class="image-icon"></i><i class="error-text"></i></span>
                        </div>
                    </div>
                    <div class="form-item">
                        <span class="form-value">验证</span>
                        <div id="drag"></div>
                        <script type="text/javascript">
                            $('#drag').sliding();
                        </script>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-item" id="big-next1">
                        <input type="button" value="下一步" class="ty-btn next-gray" id="next1" disabled="true">
                    </div>
                    <div class="form-item cb-error-msg" style="margin-top: -10px; display: none">
                        <i class="children_icon1" style="display: inline-block; width: 17px; height: 17px"></i><span class="cp-msg" style="position:relative; top: -4px; color: #ff3f13;">您的验证码请求过于频繁，请稍后再试</span>
                    </div>
                </div>
            </div>
        </form>
        </div>
<%--        注册协议--%>
        <div class="div1" style="display: block">
            <div>
                <a class="a1">
                    <span class="span1">&#10006</span>
                </a>
                <div>
                    <h3>注册协议</h3>
                </div>
                <div>
                    <p>
                        <strong>【审慎阅读】</strong>
                        您在申请注册流程中点击同意前，应当认真阅读以下协议。
                        <strong style="text-decoration: underline;">请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：</strong>
                    </p>
                    <p>
                        1、
                        <strong style="text-decoration:underline;">与您约定免除或限制责任的条款；</strong>
                    </p>
                    <p>
                        2、
                        <strong style="text-decoration: underline">与您约定法律适用和管辖的条款；</strong>
                    </p>
                    <p>
                        3、
                        <strong style="text-decoration: underline">其他以粗体下划线标识的重要条款。</strong>
                    </p>
                    <p>
                        如您对协议有任何疑问，可向平台客服咨询。
                    </p>
                    <p>
                        <strong>【特别提示】</strong>
                        当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。
                    </p>
                    <p>
                        <strong style="text-decoration: underline">阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。</strong>
                    </p>
                    <p>
                        <a>淘宝平台服务协议</a>
                    </p>
                    <p>
                        <a>隐私权政策</a>
                    </p>
                    <p>
                        <a>法律声明</a>
                    </p>
                    <p>
                        <a>支付宝及客户端服务协议</a>
                    </p>
                    <p style="text-align: center">
                        <button class="btn">同意协议
                        </button>
                    </p>
                </div>
            </div>
        </div>
        <%--        手机验证START1--%>
        <div class="cp-dialog-big" style="display: none">
        </div>
        <%--        手机验证END1--%>

        <%--        手机验证START2--%>
        <div class="ks-dialog ks-dialog-focused ks-overlay-focused" style="display: none;">
            <div class="ks-dialog-content">
                <a class="ks-overlay-close ks-dialog-close" id="close-ksd">
                    <span class="span1">&#10006</span>
                </a>
                <div class="ks-dialog-header"></div>
                <div class="ks-dialog-body" style="margin-bottom: 130px;">
                    <p class="clearfix">
                <span class="fn-inline">
                    <img style="border-radius: 50%; width: 80px; height: 80px;" id="login-head" src="cs"/>
                </span>
                        <span class="fn-inline nick-info">
                    <span class="tsl">登录名：</span>
                    <span id="login-name"> </span>
                </span>
                    </p>
                    <div style="display: block">
                        <p class="tsl">
                            手机号
                            <strong class="mobile" id="login-phone"> </strong>
                            已被以上账户使用，请确认该账户是否为你本人所有
                        </p>
                        <p>
                            <a href="${pageContext.request.contextPath}/login.htm" target="_blank" class="ty-btn next-red">该账户是我的，立即登录</a>
                            <br/><br/>
                            <a style="color: red; cursor:pointer;" id="nextReg">不是我的，使用邮箱继续注册</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <%--        手机验证END2--%>

<%--        邮箱验证1 START--%>
        <div class="emaill-dialog" style="display: none;">

        </div>
    </div>
</div>
</body>

<script>
    isFrequently = false;
    // 点击协议按钮
    $(function () {
        $('.btn').click(function () {
            $('.div1').css('display','none');
        })
    });
    // 手机号注册规则
    // 获取手机输入框-离开焦点事件
    var isPhoneCheck = false;
    $(function () {
        // 手机框失去焦点f
        $('.form-phone').blur(function () {
            var pi = $(this);
            pVal = pi.val();
            // 判断 手机格式是否正确
            var regex = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
            var isCorrect = regex.test(pVal);
            // 提示文字显示出来
            $('#reg-error').css('display','inline-block');
            if(isCorrect){
                isPhoneCheck = true;
                // 输入正确
                $('.image-icon').removeClass('children_icon1').addClass('children_icon2');
                pi.removeClass('error-border');
                $('.error-text').css('display','none');
            } else{
                isPhoneCheck = false;
                $('.image-icon').removeClass('children_icon2').addClass('children_icon1');
                pi.addClass('error-border');
                $('.error-text').css('display','inline-block');
                // 判断是否为空
                if(null == pVal || '' == pVal){
                    $('.error-text').html('请输入你的手机号码');
                } else {
                    $('.error-text').html('手机号码格式不正确，请重新输入');
                }
            }
        });
        // 鼠标悬浮在drag的事件
        $('#drag').mousemove(function () {
            if(isCheck){
                $('#next1').removeClass('next-gray').addClass('next-red');
            }
        });
        $('#big-next1').mouseover(function () {
            if(null!=$('.form-phone').val() && ''!=$('.form-phone').val()){
                $('.form-phone').blur();
            }
            // 判断条件是否都满足
            $('#next1').prop('disabled', !(isCheck && isPhoneCheck));
        });

        // 点击下一步,实现处理
        $('#next1').click(function (event) {
            if(isFrequently){
                $(".cb-error-msg").show();
                isCheck = false;
                $('#drag').html("").sliding();
                event.preventDefault();
            } else{
                $.ajax({
                    type:"POST",
                    url:"${pageContext.request.contextPath}/register/send_code.htm",
                    async:false,
                    data: {'phone': $('.form-phone').val()},
                    success:function (html) {
                        $(".cp-dialog-big").html(html).show();
                    }
                })
            }
        })
    });


    // 手机重复继续组件事件
    $(function () {
        $("#close-ksd").click(function () {
            $(".ks-dialog").hide();
        })
    });

    // 使用邮箱继续注册事件
    $(function () {
        $("#nextReg").click(function () {
            // 点击继续注册，将手机存进session，用来修改用户资料时做参照
            $.ajax({
                type: "POST",
                url:"${pageContext.request.contextPath}/register/set_rp.htm",
                async: false, // 是否异步处理
                data: {'regPhone':$("#login-phone").text()},
                success: function (rt) {
                    $(".phone-dialog").hide();
                    $(".cp-dialog-big").hide();
                    $(".ks-dialog").hide();
                    $(".emaill-dialog").show().html(rt);
                }
            });
        })
    })

</script>

<script>
    // 下拉框，定义地址数组
    var data = [{value: '+86', label: '中国大陆'}, {value: '+886', label: '中国台湾'}, {value: '852', label: '中国香港'},
        {value: '60', label: '马来西亚'}, {value: '65', label: '新加坡'}, {value: '81', label: '日本'},{value: '82', label: '韩国'},
        {value: '1', label: '美国'},{value: '1', label: '加拿大'},]
    var Main = {
        data() {
            return {
                cities: data,
                label: '中国大陆',
            }
        },
        methods: {
            getVal: function () {
            }
        }
    }
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
    $('#app>div>div>input').css({'font-weight':'700','border-radius':'0px','height':'37px','width':'170px'});
</script>
</html>
